<template>
	<view id="page_main_id" class="page_main page_loading page_gradient" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<!-- <diynav
				ref="diynav"
				:navstyle="{ background: '#ffffff' }"
				isFixed
				hasHeight
				back
				:title="page_title"
				colorModel="day"
				:rollingChange="false"
				:rollingChange_title="false"
				:pageScrollTop_targe="get_pageScrollTop_targe(change_var)"
				:pageScrollTop="scrollTop"
				@settop="set_pagetop($event)"
			></diynav> -->
			<view class="page_content">
				<!-- <myScrollView :y_on="true" :height="`${change_var.win_height - change_var.page_content_top}`"> -->
				<!-- <mySafeArea></mySafeArea> -->
				<!-- :style="{ height: `${change_var.win_height - change_var.page_content_top}rpx` }" -->
				<view class="page_content_view">
					<view class="abs_view">
						<myimg imgsrc="/static/images/share/share_bg.png" width="750" height="1786"></myimg>
					</view>

					<view class="share_view">
						<view class="share_top">
							<myimg imgsrc="/static/images/share/share_title.png" width="655" height="125"></myimg>
						</view>
						<view class="share_envelope" @click="share_user()">
							<view class="abs_view">
								<myimg imgsrc="/static/images/share/share_envelope.png" width="670" mode="widthFix"></myimg>
							</view>
							<view class="share_envelope_view">
								<view class="t1">每邀请1个新用户下单你最高赚</view>
								<view class="t2">
									<smallUnit :num="USER_MSG.config_integral_invite" unit="积分" font="160" :ratio="0.16" bold num_color="#E92936" position="bot"></smallUnit>
								</view>
								<!-- <view class="btn">
									<btns
										title="立即分享"
										btn_class=""
										height="92"
										:padding="[]"
										:btn_config="{ background: 'linear-gradient(180deg, #fad689, #fcca6e, #febf56)', width: '480rpx' }"
										:txt_config="{ color: '#703642', fontSize: '42rpx', fontWeight: 'bold' }"
										@module_btn_click="order_hidepopup()"
									></btns>
								</view> -->
							</view>
						</view>
						<view class="share_tips">
							<view class="title_view">
								<myimg imgsrc="/static/images/share/share_title_icon.png" width="38" height="30"></myimg>
								<view class="tt">如何赚积分</view>
								<myimg imgsrc="/static/images/share/share_title_icon.png" width="38" height="30"></myimg>
							</view>
							<view class="tips_con">
								<view class="tips_item">
									<myimg imgsrc="/static/images/share/share_step_1.png" width="94"></myimg>
									<view class="t1">分享</view>
									<view class="t2">邀请好友</view>
									<view class="jt">
										<myimg imgsrc="/static/images/share/share_step_jt.png" width="30"></myimg>
									</view>
								</view>
								<view class="tips_item">
									<myimg imgsrc="/static/images/share/share_step_2.png" width="94"></myimg>
									<view class="t1">新人</view>
									<view class="t2">下第一单</view>
									<view class="jt">
										<myimg imgsrc="/static/images/share/share_step_jt.png" width="30"></myimg>
									</view>
								</view>
								<view class="tips_item">
									<myimg imgsrc="/static/images/share/share_step_3.png" width="94"></myimg>
									<view class="t1">你最高赚</view>
									<view class="t2">{{ USER_MSG.config_integral_invite }}积分</view>
								</view>
							</view>
						</view>
						<view class="share_myinfo">
							<view class="title_view">
								<myimg imgsrc="/static/images/share/share_title_icon.png" width="38" height="30"></myimg>
								<view class="tt">我的收益</view>
								<myimg imgsrc="/static/images/share/share_title_icon.png" width="38" height="30"></myimg>
							</view>
							<view class="user_con">
								<view class="user">
									<view class="img">
										<myimg :imgsrc="USER_MSG.user_head" width="90" radius="45"></myimg>
									</view>
									<view class="name ell">{{ USER_MSG.nickname }}</view>
								</view>

								<view class="card" @click="goweburl_f('/pagesA/user/user_my_invite')">
									<view class="card_t">
										<view class="tt">累计收入</view>
										<myimg imgsrc="/static/images/arrow_right_theme.png" width="30"></myimg>
									</view>

									<view class="card_b">
										<smallUnit :num="USER_MSG.integral_count" unit="积分" font="36" :ratio="0.66" bold num_color="#221EA9" position="bot"></smallUnit>
									</view>
								</view>

								<view class="card" @click="goweburl_f('/pagesA/user/user_my_invite')">
									<view class="card_t">
										<view class="tt">我的好友</view>
										<myimg imgsrc="/static/images/arrow_right_theme.png" width="30"></myimg>
									</view>

									<view class="card_b">
										<smallUnit :num="USER_MSG.user_count" unit="人" font="36" :ratio="0.66" bold num_color="#221EA9" position="bot"></smallUnit>
									</view>
								</view>
							</view>
						</view>
					</view>

					<mybtns ref="mybtns" :has_safe="false" @setbot="set_pagebot($event)">
						<view class="btnview">
							<btns
								title="立即分享 马上赚积分"
								btn_class=""
								height="92"
								:padding="com_padding_fun([40, 74])"
								:btn_config="{ background: 'linear-gradient(180deg, #ffae11, #ff950d, #ff840a)' }"
								:txt_config="{ fontSize: '32rpx', color: '#8D2B00', fontWeight: 'bold' }"
								@module_btn_click="share_user()"
							></btns>
						</view>
					</mybtns>
				</view>
				<!-- </myScrollView> -->
			</view>
		</pagelogin>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			color_mode: 'day',
			change_var: {},
			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '邀请好友',
			render_req: false,
			nextreq: true,
			page_id: 0,
			page_form: {},
			page_data: {},
			page_list: [],
			loadingstatus: 0,
		};
	},
	created() {},
	onLoad(v) {
		this.init_pagedata();
	},
	onShow() {
		let _this = this;
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = this.pxTorpx(e.scrollTop);
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	computed: {},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.config_init();
			_this.info_init();
		},
		info_init() {
			let _this = this;
			_this.com_getdata({
				url: '/invite.ashx',
				data_handle_on: false,
				data: { action: 'info', phone: _this.USER_MSG.user_phone },
				id_name: 'user_id',
				data_fun: function (res) {
					if (res.state == 1) {
						let integral_count = res.integral_count;
						let user_count = res.user_count;
						_this.store_set_state_config({ state_name: 'USER_MSG', data: { integral_count, user_count } });
					}
				},
			});
		},

		config_init() {
			let _this = this;
			_this.com_getdata({
				url: '/base.ashx',
				data: { action: 'config', config_key: 'config_integral_invite' },
				data_fun: function (res) {
					if (res.state == 1) {
						_this.store_set_state_config({ state_name: 'USER_MSG', data: { config_integral_invite: res.data.config_value } });
					}
					_this.com_loading_fun({ mode: 0 });
				},
			});
		},

		share_user() {
			let _this = this;
			uni.webView.postMessage({
				data: {
					type: 'share_invite_wechat',
				},
			});
		},
	},
	watch: {},
};
</script>

<style lang="scss">
.page_content_view {
	position: relative;
}
.share_view {
	position: relative;
	z-index: 5;
	padding: 0 40rpx;
}
.share_top {
	padding: 60rpx 0;
}
.title_view {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 88rpx;
	font-weight: normal;
	font-size: 30rpx;
	color: #ffffff;
	line-height: 48rpx;
	.tt {
		margin: 0 30rpx;
	}
}
.share_envelope {
	position: relative;
	height: 614rpx;
	.share_envelope_view {
		position: relative;
		z-index: 5;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 54rpx 0 0;
		.t1 {
			font-weight: bold;
			font-size: 36rpx;
			color: #c96809;
			line-height: 49rpx;
			max-width: 354rpx;
			text-align: center;
		}
		.t2 {
			margin-top: 10rpx;
			font-weight: normal;
			font-size: 160rpx;
			color: #e92936;
		}
		// .btn {
		// 	margin-top: 20rpx;
		// }
	}
}
.share_tips {
	margin-top: 40rpx;
	.tips_con {
		background-color: #fff;
		border-radius: 30rpx;
		padding: 50rpx 0 40rpx;
		display: flex;
		align-items: center;
		.tips_item {
			position: relative;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 28rpx;
			color: #703642;
			line-height: 32rpx;
			text-align: center;
			.t1 {
				margin-top: 18rpx;
			}
			.jt {
				position: absolute;
				left: 100%;
				top: 48rpx;
				transform: translate(-50%, -50%);
			}
		}
	}
}

.share_myinfo {
	margin-top: 40rpx;
	padding: 6rpx 0;
	.user_con {
		background-color: #221ea9;
		border-radius: 30rpx;
		border: 6rpx solid #1b179f;
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		.user {
			width: 270rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.name {
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #ffffff;
			}
		}
		.card {
			border-radius: 20rpx;
			overflow: hidden;
			margin: 0 8rpx;
			width: 170rpx;
			.card_t {
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #ffffff;
				background-color: #322ccc;
			}
			.card_b {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 90rpx;
			}
		}
	}
}

// .share_btn {
// 	margin-top: 40rpx;
// }
</style>
